<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    h3 {
      line-height: 60px;
    }

    li {
      line-height: 40px;
      border: 1px dashed #333;
    }

    .list {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h3 id="title">批量操作元素</h3>
    <ul class="list">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
    </ul>
    <!-- <input type="text" class="demo"> -->
  </div>
  <div class="box">
    <button class="setHtml">
      设置html
    </button>
    <button class="getHtml">
      获取html
    </button>
    <button class="hide">隐藏</button>
    <button class="show">显示</button>
    <button class="setWidth">
      设置宽度
    </button>
    <button class="getWidth">
      获取宽度
    </button>
    <button class="attr">attr</button>
    <button class="prop">prop</button>
    <button class="css">css</button>
    <button class="addClass">addClass</button>
    <button class="removeClass">removeClass</button>
    <button class="eq">eq</button>
    <button class="siblings">siblings</button>
    <button class="chain">链式操作</button>
  </div>
</body>
<script>
  // 面向过程

  // 操作 -> 单元素 => 直接操作
  // var title = document.getElementById("title");
  // console.log(title.innerHTML);
  // title.innerHTML = "标题";

  // 操作 -> 多元素 => 遍历获取 在操作
  // var liList = document.querySelectorAll(".list li");
  // for (var i = 0; i < liList.length; i++) {
  //     var li = liList[i];
  //     li.innerHTML = "123123";
  // }

  // => 批量操作元素 => 有可能是单元素,多元素  => 方法有区别
  // 使用 document.querySelectorAll()  无论是单元素获取还是多元素 => 都会存放到集合中

  // var eles = document.querySelectorAll("#title");
  // var eles = document.querySelectorAll(".list li");


  //设置
  // function setHtml(con) {
  //   for (var i = 0; i < eles.length; i++) {
  //     var li = eles[i];
  //     li.innerHTML = con;
  //   }
  // }

  // // 获取
  // // function getHtml() {
  // //   var list = [];
  // //   for (var i = 0; i < eles.length; i++) {
  // //     var li = eles[i];
  // //     list.push(li.innerHTML);
  // //   }
  // //   return list;

  // // }

  // function getHtml() {
  //   return eles[0].innerHTML;
  // }

  // // setHtml("冲波");

  // console.log(getHtml());




  // var getEle = {
  //   eles: document.querySelectorAll(".list li"),

  //   // setHtml(con) {
  //   //   for (var i = 0; i < this.eles.length; i++) {
  //   //     var li = eles[i];
  //   //     li.innerHTML = con;
  //   //   }
  //   // },
  //   // getHtml() {
  //   //   return this.eles[0].innerHTML;
  //   // },

  //   html: function (con) {
  //     if (arguments.length >= 1) {
  //       for (var i = 0; i < this.eles.length; i++) {
  //         var li = eles[i];
  //         li.innerHTML = con;
  //       }
  //     } else {
  //       return this.eles[0].innerHTML;
  //     }
  //   }

  // }

  // // getEle.setHtml("123123");
  // // console.log(getEle.getHtml());

  // getEle.html("123123");
  // console.log(getEle.html());




  // function GetEle(selector) {
  //   var obj = {
  //     eles: document.querySelectorAll(selector),

  //     // setHtml(con) {
  //     //   for (var i = 0; i < this.eles.length; i++) {
  //     //     var li = eles[i];
  //     //     li.innerHTML = con;
  //     //   }
  //     // },
  //     // getHtml() {
  //     //   return this.eles[0].innerHTML;
  //     // },

  //     html: function (con) {
  //       if (arguments.length >= 1) {
  //         for (var i = 0; i < this.eles.length; i++) {
  //           var li = eles[i];
  //           li.innerHTML = con;
  //         }
  //       } else {
  //         return this.eles[0].innerHTML;
  //       }
  //     }

  //   }
  //   return obj;
  // }

  // var $title = GetEle("#title");
  // console.log($title);
  // $title.html("1111111");

  // var $li = GetEle(".list li");
  // console.log($li);
  // $li.html("波波波");




  function GetEle(selector) {

    this.eles = document.querySelectorAll(selector);

  }

  GetEle.prototype.html = function (con) {


    if (arguments.length >= 1) {
      // for (var i = 0; i < this.eles.length; i++) {
      //   var ele = this.eles[i];
      //   ele.innerHTML = con;
      // }

      this.each(function (ele) {
        ele.innerHTML = con;
      })

    } else {
      return this.eles[0].innerHTML;
    }

  }

  GetEle.prototype.text = function (con) {


    if (arguments.length >= 1) {
      // for (var i = 0; i < this.eles.length; i++) {
      //   var ele = this.eles[i];
      //   ele.innerText = con;
      // }
      this.each(function (ele) {
        ele.innerText = con;
      })

    } else {
      return this.eles[0].innerText;
    }

  }

  GetEle.prototype.val = function (con) {
    if (arguments.length >= 1) {
      // for (var i = 0; i < this.eles.length; i++) {
      //   var ele = this.eles[i];
      //   ele.value = con;
      // }
      this.each(function (ele) {
        ele.value = con;
      })

    } else {
      return this.eles[0].value;
    }

  }
  //隐藏
  GetEle.prototype.hide = function () {

    // for (var i = 0; i < this.eles.length; i++) {
    //   var ele = this.eles[i];
    //   ele.style.display = "none";
    // }
    this.each(function (ele) {
      ele.style.display = "none";
    })

  }
  //出现
  GetEle.prototype.show = function () {

    // for (var i = 0; i < this.eles.length; i++) {
    //   var ele = this.eles[i];
    //   ele.style.display = "block";
    // }
    this.each(function (ele) {
      ele.style.display = "block";
    })

  }

  GetEle.prototype.click = function (fn) {
    this.each(function (ele) {
      ele.onclick = fn;
    })

  }

  GetEle.prototype.each = function (fn) {
    for (var i = 0; i < this.eles.length; i++) {
      var item = this.eles[i];
      var index = i;
      var array = this.eles;
      fn(item, index, array);
      console.log(item, index, array);
      // jquery中 它的each方法 参数顺序 fn(index, item);

    }
  }

  // width() 获取和设置元素的宽度 
  // width("100px")  有参数就设置
  // width()         没有参数就获取

  GetEle.prototype.width = function (con) {
    if (arguments.length >= 1) {
      this.each(function (ele) {
        // 是否有单位?
        //   有单位   px pt  %  em rem vw  vh   => 直接拼接
        // 没有单位   200                       => 默认"px"
        var unit = /^\d+(\.\d+)?(px|pt|%|em|rem|vw|vh)$/;
        if (unit.test(con)) {
          ele.style.width = con;
        } else {
          ele.style.width = con + "px";
        }
      })

    } else {

      return parseInt(this.getStyle("width"));
    }
  }

  GetEle.prototype.height = function (con) {
    if (arguments.length >= 1) {
      this.each(function (ele) {
        // 是否有单位?
        //   有单位   px pt  %  em rem vw  vh   => 直接拼接
        // 没有单位   200                       => 默认"px"
        var unit = /^\d+(\.\d+)?(px|pt|%|em|rem|vw|vh)$/;
        if (unit.test(con)) {
          ele.style.height = con;
        } else {
          ele.style.height = con + "px";
        }
      })

    } else {

      return parseInt(this.getStyle("height"));
    }
  }

  GetEle.prototype.getStyle = function (attr) {
    var ele = this.eles[0];
    if (window.getComputedStyle) {
      return window.getComputedStyle(ele)[attr];
    } else {
      return ele.currentStyle[attr];
    }
  }

  // attr()   获取和设置标签内的属性(属性节点)
  // attr(key,val) 两个参数    setAttribute()
  // attr(key)     一个参数    getAttribute()
  GetEle.prototype.attr = function (key, val) {
    if (arguments.length >= 2) {
      this.each(function (ele) {
        ele.getAttribute(key, val)
      })
    } else if (arguments.length == 1) {
      return this.eles[0].getAttribute(key);
    } else {
      var err = new SyntaxError("place entry at last one paramter!");
      throw err;
    }
  }

  // prop()   获取和设置元素节点的属性
  // prop(key,val)  两个参数    ele.className = "a"
  // prop(key)      一个参数    ele.className
  GetEle.prototype.prop = function (key, val) {
    if (arguments.length >= 2) {
      this.each(function (ele) {
        ele[key] = val;
      })
    } else if (arguments.length == 1) {
      return this.eles[0][key];
    } else {
      var err = new SyntaxError("pleace entry at least one paramter!");
      throw err;
    }
  }

  GetEle.prototype.css = function (key, val) {

    if (arguments.length >= 2) {
      this.each(function (ele) {
        ele.style[key] = val;
      })
    } else if (arguments.length == 1) {
      if (typeof arguments[0] == "object") {
        for (var k in arguments[0]) {
          var v = arguments[0][k];
          this.css(k, v)
        }
      } else if (typeof arguments[0] == "string") {
        return this.getStyle(key);
      }
    } else {
      var err = new SyntaxError("pleace entry at least one paramter!");
      throw err;
    }

  }

  GetEle.prototype.addClass = function (con) {
    var list = con.split(" ");
    this.each(function (ele) {
      ele.classList.add(...list);
    })

  }

  GetEle.prototype.removeClass = function (con) {
    var list = con.split(" ");
    this.each(function (ele) {
      ele.classList.remove(...list);
    })
  }

  GetEle.prototype.eq = function (index) {
    var ele = this.eles[index];
    this.eles = [ele];
    return this;
  }

  GetEle.prototype.siblings = function () {
    var ele = this.eles[0];  //被选中的元素
    var parentEle = ele.parentElement;
    var children = parentEle.children;
    //    同级元素中  除被选中的元素以外的  其他所有同级元素
    var list = Array.from(children).filter(item => item !== ele);
    this.eles = list;
    return this;
  }

  function $(selector) {
    return new GetEle(selector);
  }

  // $("#title").html("111111");
  // var $title = new GetEle("#title");
  // console.log($title);
  // $title.html("1111111");

  // $(".list li").html("波波波波");
  // var $li = new GetEle(".list li");
  // console.log($li);
  // $li.html("波波波");

  // $(".demo").val("周冲波")
  // var $demo = new GetEle(".demo");
  // console.log($demo);
  // $demo.val("周冲波")

  // $("$title").hide("111111");


  $(".list li").click(function () {
    console.log(this);
  })

  $(".setHtml").click(function () {
    $(".list li").html("123123");
  })

  $(".getHtml").click(function () {
    alert($(".list li").html())
  })

  $(".hide").click(function () {
    $(".list li").hide();
  })

  $(".show").click(function () {
    $(".list li").show();
  })

  $(".setWidth").click(function () {
    $(".list li").width("200.5px")
  })

  $(".getWidth").click(function () {
    alert($(".list li").width())
  })

  $(".attr").click(function () {
    $(".list li").attr("class", "newLi")
    $(".list li").attr("asd", "asd");
    console.log($(".list li").attr("class"));
  })

  $(".prop").click(function () {
    $(".list li").prop("class", "newLi")
    $(".list li").prop("asd", "asd");
    console.log($(".list li").prop("class"));
  })

  $(".css").click(function () {
    // $(".list li").css("background", "red");
    // $(".list li").css("width", "100px");
    // $(".list li").css("height", "100px");
    // $(".list li").css("float", "left");
    // $(".list li").css("text-align", "center");
    // $(".list li").css("line-height", "100px");

    console.log($(".list li").css("width"));

    $(".list li").css({
      background: "red",
      width: "100px",
      height: "100px",
      float: "left",
      textAlign: "center",
      lineHeight: "100px",
    })

  })

  $(".addClass").click(function () {
    $(".list li").addClass("one two three")
  })

  $(".removeClass").click(function () {
    $(".list li").removeClass("one three")
  })

  $(".eq").click(function () {
    console.log($(".list li").eq(1));

    $(".list li").eq(1).css({
      background: "red",
      width: "100px",
      height: "100px",
      textAlign: "center",
      lineHeight: "100px",
    })
  })

  $(".siblings").click(function () {
    $(".list li").eq(1).siblings().css({
      background: "green",
      width: "100px",
      height: "100px",
      textAlign: "center",
      lineHeight: "100px",
    })
  })

  $(".chain").click(function () {
    $(".list li").click(function () {
      console.log(this);
    }).eq(0).html(1111).width(200).height(200).css({
      background: "red",
    }).siblings().html(222222).width(100).height(100).css({
      background: "blue"
    })
  })

</script>

</html>